<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局案例</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div>
        <!-- 导航区 -->
        <header class="nav-header">
            <div class="logo">
                <a href="#">
                    <img src="../flex案例/images/logo.png" alt="logo">
                </a>
            </div>
            <div class="nav-content">
                <ul class="content-list">
                    <li><a href="#">国内校区</a></li>
                    <li><a href="#">缅甸校区</a></li>
                    <li><a href="#">非洲校区</a></li>
                    <li><a href="#">美国校区</a></li>
                </ul>
            </div>
        </header>
        <!-- 内容区 -->
        <div class="page-content">
            <div class="content-info">
                <ul class="content-ul">
                    <li>
                        <img src="./images/item1.png" alt="">
                        <a href="#">我的邮箱</a>
                    </li>
                    <li>
                        <img src="./images/item2.png" alt="">
                        <a href="#">云服务</a>
                    </li>
                    <li>
                        <img src="./images/item3.png" alt="">
                        <a href="#">手机课堂</a>
                    </li>
                    <li>
                        <img src="./images/item4.png" alt="">
                        <a href="#">微信服务</a>
                    </li>
                    <li>
                        <img src="./images/item5.png" alt="">
                        <a href="#">在线客服</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>